<template>
  <view class="store-page">
    <view class="top-box">
      <view class="nav-bar" :style="{ height: navBarHeight }">
        <view
          class="navbar-title"
          :style="{ 'padding-top': statusBarHeight + 'px' }"
        >
          <image
            @click="barnk()"
            class="return"
            src="/static/images/return.png"
          ></image>
          <view class="navbar-name">我的积分</view>
          <view></view>
        </view>
      </view>
      <!-- <view class="rules">积分规则</view> -->
      <view class="rules1">
        <view class="ml-40">
          <view class="rules-text">我的积分</view>
          <view class="rules-num">{{ mineScore.totalScore }}</view>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="sign">
        <view class="sign-text">已连续签到</view>
        <view class="sign-text1">{{ mineScore.dayNumber }}天</view>
      </view>
      <view class="card-flex">
        <view class="card-day" v-for="(item, index) in dayList" :key="index">
          <view
            class="day"
            :style="{
              background: item.value ? '#FFE3E6' : '#f5f5f5',
              border: item.value ? '1px solid #FF4254' : 'none',
            }"
          >
            <image class="day-img" src="/static/images/myPoints/4.png"></image>
            <image
              v-if="item.value"
              class="day-img1"
              src="/static/images/myPoints/3.png"
            ></image>
            <div class="day-text" v-else>+{{ item.score }}</div>
          </view>
          <view class="card-text" v-if="item.value">已签</view>
          <view class="card-text" v-else>第{{ item.day }}天</view>
        </view>
      </view>
      <view
        class="card-btn"
        @click="integralSignin"
        :style="{ background: mineScore.toDayStatus ? '#FF4254' : '#FFE3E6' }"
        >{{ mineScore.toDayStatus ? "签到领积分" : "今日已签到" }}</view
      >
    </view>
    <!-- <view class="task">
      <view class="task-title">任务中心</view>
      <view class="task-flex">
        <view class="task-flex1">
          <image class="task-img" src="/static/images/myPoints/6.png"></image>
          <view>
            <view class="task-text">任务标题 +10</view>
            <view class="task-text1">任务描述任务描述任务描述</view>
          </view>
        </view>
        <view class="task-btn">去完成</view>
      </view>

      <view class="task-flex">
        <view class="task-flex1">
          <image class="task-img" src="/static/images/myPoints/6.png"></image>
          <view>
            <view class="task-text">任务标题 +10</view>
            <view class="task-text1">任务描述任务描述任务描述</view>
          </view>
        </view>
        <view class="task-btn">去完成</view>
      </view>
    </view> -->
  </view>
</template>

<script>
import integralApi from "@/api/integral";

export default {
  name: "Store",
  data() {
    return {
      navBarHeight: "",
      statusBarHeight: 0,
      system: [],
      menu: [],
      menuHeight: 0, //胶囊高度
      dayList: [
        {
          value: false, // 是否签到
          score: 1, // 签到积分
        },
        {
          value: false,
          score: 1,
        },
        {
          value: false,
          score: 1,
        },
        {
          value: false,
          score: 1,
        },
        {
          value: false,
          score: 1,
        },
        {
          value: false,
          score: 1,
        },
        {
          value: false,
          score: 1,
        },
      ],
      mineScore: {},
    };
  },

  async onLoad() {
    this.navBarHeight = this.$store.getters.heightData.navBarHeight + "px";

    //获取系统信息
    uni.getSystemInfo({
      success: (res) => {
        this.system = res;
      },
    });

    //获取胶囊信息
    this.menu = uni.getMenuButtonBoundingClientRect();

    //计算组件高度
    this.statusBarHeight = this.system.statusBarHeight; //状态栏高度
    this.menuHeight = this.menu.height; //胶囊高度
    this.statusBarHeight = this.menu.top; //胶囊与顶部的距离
  },
  async onShow() {
    this.getMineScore();
  },
  methods: {
    getMineScore() {
      integralApi.getMineScore().then((res) => {
        if (res.code == 200) {
          let dayList = this.dayList;
          this.mineScore = res.data;
          dayList[0].value = this.mineScore.toDayStatus ? false : true;
          this.dayList = dayList.map((item, index) => {
            let day =
              this.mineScore.dayNumber <= 0
                ? this.mineScore.dayNumber + index + 1
                : this.mineScore.toDayStatus
                ? this.mineScore.dayNumber + index + 1
                : this.mineScore.dayNumber + index;
            return {
              ...item,
              day,
              score: day >= 7 ? 1 : 1,
            };
          });
        }
      });
    },
    integralSignin() {
      integralApi.integralSignin().then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "签到成功！",
            icon: "none",
          });
          this.getMineScore();
        }
      });
    },
    barnk() {
      uni.navigateBack({
        delta: 1, // delta值为1时表示返回的页面层数
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top-box {
  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/my_points_20250107185410A020.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.top-box1 {
  background: #fff3f6;
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
}

.top-box1 {
  background: #f1f6ff;
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
}

.return {
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
}

.navbar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-name {
  color: #222222;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 36rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.9;
  margin-left: -20rpx;
}

.rules {
  text-align: right;
  color: #4b3138;
  text-align: right;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 40rpx;
  margin-top: 10rpx;
  margin-right: 28rpx;
}

.rules-text {
  color: #4b3138;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 40rpx;
  opacity: 0.7;
}

.rules-num {
  color: #4b3138;
  font-family: "DIN";
  font-size: 70rpx;
  font-style: normal;
  font-weight: 700;
  line-height: 70rpx;
  margin-top: 20rpx;
}
.ml-40 {
  margin-left: 40rpx;
}
.rules1 {
  padding-bottom: 162rpx;
}
.card {
  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/card_bg_20250107185429A021.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30rpx 24rpx 40rpx 24rpx;
  margin: -112rpx 28rpx 0 28rpx;
  .card-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
  }
  .card-day {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-text {
    color: #000000;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 20rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 24rpx;
    opacity: 0.5;
    margin-top: 20rpx;
  }
  .card-btn {
    width: 520rpx;
    height: 88rpx;
    flex-shrink: 0;
    border-radius: 24rpx;
    background: #ff4254;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 40rpx;
    margin: 0 auto;
    margin-top: 40rpx;
  }
  .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78rpx;
    height: 112rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
    box-sizing: border-box;

    .day-img {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 10rpx;
    }
    .day-img1 {
      width: 24rpx;
      height: 20.71rpx;
    }
    .day-text {
      text-align: center;
      font-family: "PingFang SC";
      font-size: 22rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 24rpx;
      opacity: 0.5;
    }
  }
}
.sign {
  display: flex;
  .sign-text {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .sign-text1 {
    color: #ff4254;
    font-family: "PingFang SC";
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}

.task {
  width: 694rpx;
  height: 700rpx;
  flex-shrink: 0;
  border-radius: 24rpx;
  background: #fff;
  margin: 20rpx 28rpx;
  padding: 40rpx 24rpx;
  .task-title {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .task-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
  }
  .task-flex1 {
    display: flex;
    align-items: center;
  }
  .task-img {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
  }
  .task-text {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 40rpx;
    opacity: 0.9;
  }
  .task-text1 {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.5;
  }
  .task-btn {
    width: 140rpx;
    height: 60rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
    border: 2rpx solid #ff4254;
    color: #ff4254;
    font-family: "PingFang SC";
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
